import {List} from 'antd';
import React, {useState} from 'react';
import ResetPwd from '@/pages/account/settings/components/ResetPwd';

type Unpacked<T> = T extends (infer U)[] ? U : T;

const passwordStrength = {
    strong: <span className="strong">强</span>,
    medium: <span className="medium">中</span>,
    weak: <span className="weak">弱 Weak</span>,
};

const SecurityView: React.FC = () => {
    const [modalVisible, setModalVisible] = useState(false);
    const getData = () => [
        {
            title: '账户密码',
            description: (
                <>
                    当前密码强度：
                    {passwordStrength.medium}
                </>
            ),
            actions: [
                <a
                    key="config"
                    onClick={async () => {
                        setModalVisible(true);
                    }}
                >
                    修改
                </a>
            ],
        },
    ];

    const data = getData();
    return (
        <>
            <List<Unpacked<typeof data>>
                itemLayout="horizontal"
                dataSource={data}
                renderItem={(item) => (
                    <List.Item actions={item.actions}>
                        <List.Item.Meta title={item.title} description={item.description}/>
                    </List.Item>
                )}
            />
            <ResetPwd
                modalVisible={modalVisible}
                onClose={() => {
                    setModalVisible(false);
                }}
            />
        </>
    );
};

export default SecurityView;
